 <template>
   <node
    :title="config.name"
    :show-error="showError"
    :content="content"
    :error-info="errorInfo"
    @selected="selected"
    @delNode="delNode"
    @insertNode="insertNode"
    placeholder="请设置审批人"
    header-bgc="#f78f5f"
    header-icon="ele-Stamp"
  />
 </template>
 
 <script>
import { computed, reactive, toRefs } from 'vue'
 import Node from './Node.vue'
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'

 export default {
    name: 'ApprovalNode',
    components: { Node },
    props: {
        config: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    emits: ['selected', 'delNode', 'insertNode'],
    setup(props, context) {
        const { config } = toRefs(props)
        const storesWorkFlowConfig = useWorkFlowConfig()
        const workFlowConfig = storeToRefs(storesWorkFlowConfig)
        const state = reactive({
            showError: false,
            errorInfo: '',
        })
        const selected = () => {
            context.emit('selected')
        }
        const delNode = () => {
            context.emit('delNode')
        }
        const insertNode = (type) => {
            context.emit('insertNode', type)
        }
        const formItems = computed(() => {
            return workFlowConfig.design.value.formItems
        })
        const content = computed(() => {
            const configs = config.value.props
            switch (configs.assignedType) {
                case 'ASSIGN_USER':
                    if (configs.assignedUser.length > 0) {
                        let texts = []
                        configs.assignedUser.forEach((org) => texts.push(org.name))
                        return String(texts).replaceAll(',', '、')
                    } else {
                        return '请指定审批人'
                    }
                case 'SELF':
                    return '发起人自己'
                case 'SELF_SELECT':
                    return configs.selfSelect.multiple
                        ? '发起人自选多人'
                        : '发起人自选一人'
                case 'LEADER_TOP':
                    return '多级主管依次审批'
                case 'LEADER':
                    return configs.leader.level > 1
                        ? '发起人的第 ' + configs.leader.level + ' 级主管'
                        : '发起人的直接主管'
                case 'FORM_USER':
                    if (!configs.formUser || configs.formUser === '') {
                        return '表单内联系人（未选择）'
                    } else {
                        let text = getFormItemById(formItems.value, configs.formUser)
                        if (text && text.title) {
                            return `表单（${text.title}）内的人员`
                        } else {
                            return '该表单项已被移除😥'
                        }
                    }
                case 'ROLE':
                    if (configs.role.length > 0) {
                        return `角色 [${String(configs.role.map((r) => r.name)).replaceAll(
                        ',',
                        '、'
                        )}] `
                    } else {
                        return '指定角色（未设置）'
                    }
                case 'REFUSE':
                    return '系统自动拒绝审批'
                case 'FORM_DEPT':
                    if (!configs.formDept || configs.formDept === '') {
                        return '表单内部门的主管（未选择）'
                    } else {
                        let text = getFormItemById(formItems.value, configs.formDept)
                        if (text && text.title) {
                            return `表单（${text.title}）内的部门主管`
                        } else {
                            return '该表单项已被移除😥'
                        }
                    }
                case 'ASSIGN_LEADER':
                    if ((configs.assignedDept || []).length > 0) {
                        let texts = []
                        configs.assignedDept.forEach((org) => texts.push(org.name))
                        return String(texts).replaceAll(',', '、')
                    } else {
                        return '请指定部门'
                    }
                default:
                    return '未知设置项😥'
            }
        })
        const getFormItemById = (items, id) => {
            for (let i = 0; i < items.length; i++) {
                if (items[i].name === 'SpanLayout') {
                    let result = getFormItemById(items[i].props.items, id)
                    if (result) {
                        return result
                    }
                } else if (items[i].id === id) {
                    return items[i]
                }
            }
            return null
        }
        //校验数据配置的合法性
        const validate = (err) => {
            try {
                return (state.showError =
                ![`validate_${config.value.props.assignedType}`](err))
            } catch (e) {
                return true
            }
        }
        const validate_ASSIGN_USER = (err) => {
            if (config.value.props.assignedUser.length > 0) {
                return true
            } else {
                state.errorInfo = '请指定审批人员'
                err.push(`${config.value.name} 未指定审批人员`)
                return false
            }
        }
        const validate_ASSIGN_LEADER = (err) => {
            if ((config.value.props.assignedDept || []).length > 0) {
                return true
            } else {
                state.errorInfo = '请指定要审批的部门'
                err.push(`${config.value.name} 未指定审批部门`)
                return false
            }
        }
        const validate_SELF_SELECT = (err) => {
            return true
        }
        const validate_LEADER_TOP = (err) => {
            return true
        }
        const validate_LEADER = (err) => {
            return true
        }
        const validate_ROLE = (err) => {
            if (config.value.props.role.length <= 0) {
                state.errorInfo = '请指定负责审批的系统角色'
                err.push(`${config.value.name} 未指定审批角色`)
                return false
            }
            return true
        }
        const validate_SELF = (err) => {
            return true
        }
        const validate_FORM_USER = (err) => {
            if ((config.value.props.formUser || '') === '') {
                state.errorInfo = '请指定表单中的人员组件'
                err.push(`${config.value.name} 审批人为表单中人员，但未指定`)
                return false
            }
            return true
        }
        const validate_FORM_DEPT = (err) => {
            if ((config.value.props.formDept || '') === '') {
                state.errorInfo = '请指定表单中的部门选择组件'
                err.push(`${config.value.name} 审批人为表单中的部门主管，但未指定`)
                return false
            }
            return true
        }
        const validate_REFUSE = (err) => {
            return true
        }
        return {
            ...toRefs(state),
            selected,
            delNode,
            insertNode,
            formItems,
            content,
            validate,
            validate_ASSIGN_USER,
            validate_ASSIGN_LEADER,
            validate_SELF_SELECT,
            validate_LEADER_TOP,
            validate_LEADER,
            validate_ROLE,
            validate_SELF,
            validate_FORM_USER,
            validate_FORM_DEPT,
            validate_REFUSE
        }
    }
 }
 </script>
 
 <style>
 
 </style>